<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3.5.1 Vue.js 是各个模块组成的有机整体</title>
</head>
<body>
    
</body>
    <script>
        /**
         * 组件的实现依赖于渲染器，模板的编译依赖于编译器，
         *  并且编译后生成的代码是根据渲染器和虚拟 DOM 的设计决定的
         * 
         * 编译器能识别出哪些是静态属性，哪些是动态属性，
         *  在生成代码的时候完全可以附带这些信息
         * 
         * 编译器和渲染器之间是存在信息交流的，
         *  它们互相配合使得性能进一步提升，
         *  而它们之间交流的媒介就是虚拟 DOM 对象
         * 
        */

        `<div id="foo" :class="cls"></div>`
        // 编译器编译 =>
        export default {
            render() {
                return {
                    tag: 'div',
                    props: {
                        id: 'foo',
                        class: cls
                    },
                    patchFlags: 1 // 假设数字 1 代表 class 是动态的
                }
            }
        }
        
    </script>
</html>